<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <style type="text/css">
    #changeColor {
      width: 300px;
      height: 300px;
      background-color: aqua;
    }
  </style>

  <body>
    <button id="changeColor" onclick="changeColor()">切换背景颜色</button>
    <script>
      /*
       * 绑定事件的方式：
       *  一.html行内模式
       * 二。DOM方式：onXXXX方式
       * 三.
       * */
      //方式一：
      var btn = document.querySelector("#changeColor");
      btn.onclick = function (event) {
        //浏览器在事件调用的时候，都会默认传入一个实践对象，该事件包含了此次事件的详细信息
        console.log(event);
        if (btn.style.backgroundColor == "aqua") {
          btn.style.backgroundColor = "red";
        } else {
          btn.style.backgroundColor = "aqua";
        }
      }
      //方式二：
      /* function changeColor() {
           var btn = document.querySelector("#changeColor");
           if (btn.style.backgroundColor == "aqua") {
               btn.style.backgroundColor = "red";
           } else {
               btn.style.backgroundColor = "aqua";
           }
       }*/
    </script>
  </body>

</html>